<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<link rel="stylesheet" href="https://static.91haoka.cn/vant.css" />
		<script src="https://static.91haoka.cn/vue.min.js"></script>
		<script src="https://static.91haoka.cn/vantall.js"></script>
		<script src="https://static.91haoka.cn/axios.min.js"></script>
		<link rel="stylesheet" type="text/css" href="https://static.91haoka.cn/all.css" />
		<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
		<script src="https://cdn.rockysports.cn/moment.js" type="text/javascript" charset="utf-8"></script>
		
		<!-- 快手回调用 -->
		<script type="text/javascript">
			(function(root) {
				var ksscript = document.createElement('script');
				ksscript.setAttribute('charset', 'utf-8');
				ksscript.src = '//p2-yx.adkwai.com/udata/pkg/ks-ad-trace-sdk/ks-trace.3.2.0.min.js';
				var s = document.getElementsByTagName('script')[0];
				s.parentNode.insertBefore(ksscript, s);
			})(window);
		</script>
		
	</head>
	<style type="text/css">
		* {
			box-sizing: border-box;
			font-family: 'PingFang SC';
			font-size: 14px;
		}
		[v-cloak] {
			display: none;
		}

		.center {
			padding: 0.2rem 0;
		}

		.smalltitle {
			color: #3976ff;
			padding: 0.2rem;
			border-bottom: 1px #EAEAEA solid;
			padding-left: 0.5rem;
			font-weight: bold;
			background: url(https://cdn.91haoka.cn/xian.png) no-repeat 0.1rem center;
			background-size: 16px;
		}

		.title {
			border-bottom: 1px #EAEAEA solid;
			line-height: 0.8rem;
			padding: 0 0.2rem;
		}

		.footer img {
			width: 100%;
			display: block;
		}

		.flex {
			display: flex;
		}

		.li {
			line-height: 0.8rem;
			padding: 0 0.5rem;
		}

		.tishi {
			flex-basis: 1.5rem;
			color: #666;
		}

		.neirong {
			flex-basis: 5rem;
			position: relative;
		}

		.van-field__control {
			color: #333;
		}

		.where {
			padding: 0px 16px;
			color: #333;
		}

		.w1 {}

		.code {
			position: absolute;
			right: 0;
			z-index: 98;
			height: 0.5rem;
			font-size: 12px;
		}

		.ps {
			font-size: 12px;
			padding: 0.2rem 0.5rem;
			color: #999;
			line-height: 0.4rem;
		}

		.ps2 {
			font-size: 12px;
			padding: 0.0rem 0.5rem;
			display: flex;
			justify-content: space-between;
			color: #e8b004;
			line-height: 0.4rem;
		}

		.buy {
			padding: 0.2rem 0.5rem;
		}

		.buy button {
			height: 40px;
			line-height: 38px;
		}

		.van-radio {
			margin-bottom: 0.15rem;
		}

		.tc {
			border: 1px #EAEAEA solid;
			padding-left: 0.2rem;
			margin-bottom: 0.1rem;
			line-height: 0.6rem;
			border-radius: 3px;
			background: #FFFFFF;
		}

		.act {
			background: #1989fa !important;
			color: #FFFFFF;
		}

		.van-button--disabled {
			background: #FFFFFF;
			color: #1989fa;
		}

		.van-button,
		.van-button--large,
		.buy button {
			height: auto;
			line-height: 25px;
			
		}
		.van-button span{ font-size: 12px;}
		.van-uploader{ width: 100%;height: 100%;}
		.van-uploader__wrapper{ width: 100%;height: 100%;}
		.van-uploader__upload{ width: 100%;height: 100%;}
		.van-uploader__input-wrapper{ width: 100%;height: 100%;}
		img{max-width: 100%; max-height: 100%;}
		.van-cell{ background: transparent;}
		.van-popup{ background: transparent !important; color: #fff;}

	</style>

	<body>
		<div id="app" style="background: #F1F1F1; min-height: 100vh; padding:0.2rem 0.2rem 1.2rem;" v-cloak>

			<div class="top" v-if="!shuruzhong">
				<div class="topimg">
					<img :src="item.details">
				</div>
				
			</div>
			
			<!-- <div class="flex" style="background: #fff; border-radius:5px; padding:0.2rem;">
				<div style="width: 1.8rem; max-height:1.8rem; overflow:hidden;"><img :src="item.pic" class="bor"></div>
				<div style="flex-grow: 1; padding-left: 0.3rem; color: #2D3038; font-size: 0.26rem;">
					<div style="font-weight: bold; font-size: 0.32rem;">{{item.sale_name}}</div>
					<div style="text-align: right; font-weight: bold;">￥{{item.price}}</div>
				</div>
			</div> -->
			<div v-if="peizhi.xiantianxie == 1">
				<div v-if="peizhi.needidcard==1||peizhi.needidcard==undefined" style="background: #fff; border-radius:5px; padding:0.4rem; margin-top:0.2rem; ">
					<div style="font-weight: bold; font-size: 15px; margin-bottom:0.1rem">个人信息</div>
					<div class="flex" style="align-items: center; border-bottom:1px #EAEAEA solid;">
						<div style="width: 1.8rem; overflow:hidden;">姓名</div>
						<div style="flex-grow: 1; max-width: 4.5rem; padding-left: 0.3rem; color: #2D3038; font-size: 0.26rem;">
							<van-field v-model="all.id_name" placeholder="系统已加密，请放心填写"  />
						</div>
					</div>
					<div  class="flex" style="align-items: center; border-bottom:1px #EAEAEA solid;">
						<div style="width: 1.8rem; overflow:hidden;">身份证号码</div>
						<div style="flex-grow: 1; max-width: 4.5rem;  padding-left: 0.3rem; color: #2D3038; font-size: 0.26rem;">
							<van-field v-model="all.id_num" placeholder="系统已加密，请放心填写" />
						</div>
					</div>
				</div>
				
				<div style="background: #fff; border-radius:5px; padding:0.4rem; margin-top:0.2rem;">
					<div style="font-weight: bold; font-size: 15px; margin-bottom:0.1rem">配送信息</div>
					<div class="flex" style="align-items: center; border-bottom:1px #EAEAEA solid;" v-if="!peizhi.shouhuorenxingming">
						<div style="width: 1.8rem; overflow:hidden;">收货人</div>
						<div style="flex-grow: 1; max-width: 4.5rem;  padding-left: 0.3rem; color: #2D3038; font-size: 0.26rem;">
							<van-field v-model="all.name" placeholder="系统已加密，请放心填写"  />
						</div>
					</div>
					<div class="flex" style="align-items: center; border-bottom:1px #EAEAEA solid;">
						<div style="width: 1.8rem; overflow:hidden;">联系电话</div>
						<div style="flex-grow: 1; max-width: 4.5rem;  padding-left: 0.3rem; color: #2D3038; font-size: 0.26rem;">
							<van-field v-model="all.mobile" type="tel" placeholder="系统已加密，请放心填写"  />
						</div>
					</div>
					<div class="flex" style="align-items: center; border-bottom:1px #EAEAEA solid; position:relative;" v-if="peizhi.duanxin">
						<div style="width: 1.8rem; overflow:hidden;">验证码</div>
						<div style="flex-grow: 1; max-width: 4.5rem;  padding-left: 0.3rem; color: #2D3038; font-size: 0.26rem;">
							<div class="code" style="right: 0rem; top:0.2rem; "><van-button type="info" size="small" @click="getcode" type="tel" :disabled="yzmuse" style="font-size: 12px;" >{{yzm}}</van-button></div>
							<van-field v-model="all.code" placeholder="请输入验证码" />
						</div>
					</div>
				
					<div class="flex" style="align-items: center; border-bottom:1px #EAEAEA solid;">
						<div style="width: 1.8rem; overflow:hidden;">所在地区</div>
						<div style="flex-grow: 1; max-width: 4.5rem;  padding-left: 0.3rem; color: #2D3038; font-size: 0.26rem; line-height:44px; position:relative;" @click="showPopup">
							<div class="where">{{shengshiqu}}
								<van-icon name="arrow" size="14" style="position: absolute; top: 0px; line-height:44px; right:0;" />
							</div>
						</div>
					</div>
					<div class="flex" style="align-items: center; border-bottom:1px #EAEAEA solid;">
						<div style="width: 1.8rem; overflow:hidden;">详细地址</div>
						<div style="flex-grow: 1; max-width: 4.5rem;  padding-left: 0.3rem; color: #2D3038; font-size: 0.26rem;">
							<van-field v-model="all.address" placeholder="请输入详细地址"  />
						</div>
					</div>
					<!-- <div class="flex" style="align-items: center; border-bottom:1px #EAEAEA solid;">
						<div style="width: 1.8rem; overflow:hidden;">上传相关证件</div>
						<div style="flex-grow: 1; padding-left: 0.3rem; color: #2D3038;  text-align:right;">
							<van-icon name="arrow" size="14" style=" line-height:44px;" />
						</div>
					</div> -->
					
					
					<div v-if="peizhi.shenfenzheng">
						<div style="border-bottom:1px #EAEAEA solid; padding:0.3rem 0">
							根据有关部门要求，必须上传真实身份证照片。<span style="color: #f00;">未上传照片，订单无效。</span>
						</div>
						<div class="flex" style="padding: 0.25rem 0;justify-content: space-around;">
							<div style="width: 3rem; background: #f7f8fa;" class="flexcc">
								
								<div style="width: 100%; height: 100%;">
									<van-uploader :after-read="afterRead1"  deletable="false" preview-size="3rem" show-upload="false" >
										<div v-if="all.face_url"><img :src="all.face_url" style="width: 3rem; "></div>
										<div style="width: 100%; height: 100%;" class="flexcc" v-if="!all.face_url"><van-icon name="photograph" color="#999" size="30" /></div>
									</van-uploader>
								</div>
							</div>
							<div style="width: 3rem;" class="flexcc">
								<img src="./img/face.jpg" style="width: 3rem;">
							</div>
						</div>
						<div style="padding: 0.1rem 0.25rem;">证件四角边缘空隙2厘米以上，手机横拍，照片清晰不模糊，无水印，无反光，无PS</div>
						<div class="flex" style="padding: 0.25rem 0;justify-content: space-around;">
							<div style="width: 3rem; background: #f7f8fa;" class="flexcc">
								
								<div style="width: 100%; height: 100%;">
									<van-uploader :after-read="afterRead2"  deletable="false" preview-size="3rem" show-upload="false" >
										<div v-if="all.back_url"><img :src="all.back_url" style="width: 3rem;"></div>
										<div style="width: 100%; height: 100%;" class="flexcc" v-if="!all.back_url"><van-icon name="photograph" color="#999" size="30" /></div>
									</van-uploader>
								</div>
							</div>
							<div style="width: 3rem;" class="flexcc">
								<img src="./img/back.jpg" style="width: 3rem;">
							</div>
						</div>
						<div style="padding: 0.1rem 0.25rem;">证件四角边缘空隙2厘米以上，手机横拍，照片清晰不模糊，无水印，无反光，无PS</div>
						<div class="flex" style="padding: 0.25rem 0;justify-content: space-around;">
							<div style="width: 3rem; background: #f7f8fa;" class="flexcc">
								<div style="width: 100%; height: 100%;">
									<van-uploader :after-read="afterRead3"  deletable="false" preview-size="3rem" show-upload="false" >
										<div v-if="all.hand_url"><img :src="all.hand_url" style="width: 3rem;"></div>
										<div style="width: 100%; height: 100%;" class="flexcc" v-if="!all.hand_url"><van-icon name="photograph" color="#999" size="30" /></div>
									</van-uploader>
								</div>
							</div>
							<div style="width: 3rem;" class="flexcc">
								<img src="./img/head.png" style="width: 3rem;">
							</div>
						</div>
						<div style="padding: 0.1rem 0.25rem;">无需手持身份证，胸部以上，露出双肩，人像面部比例不低于1/3，无水印，无反光，无PS</div>
					</div>
					
					<div style="font-size: 12px; margin: 0.2rem 0rem; display: flex; flex-wrap: wrap; align-items: center;" v-if="item.network_access_protocol == 1">
						<van-checkbox v-model="checked" style="margin-right: 0.1rem; font-size: 12px;">我已阅读并同意</van-checkbox>
						
						<span style="color: #007AFF;font-size: 12px;" v-for="(item,index) in xieyilist" :key="item.id" @click="dakaixieyi(index)">《{{item.title}}》</span>
						<!-- <span style="color: #007AFF;font-size: 12px;" @click="log1 = true">《客户入网许可协议及服务协议》</span>
						<span style="color: #007AFF;font-size: 12px;" @click="log2 = true">《转卖或转借电话卡风险告知书》</span>
						<span style="color: #007AFF;font-size: 12px;" @click="log3 = true">《个人信息收集证明》</span> -->
					</div>
				</div>
			</div>
			<!-- nc的需求 -->
			<div v-if="peizhi.xiantianxie == 2">
				<div style="background: #fff; border-radius:5px; padding:0.4rem; margin-top:0.2rem; ">
					<div style="font-weight: bold; font-size: 15px; margin-bottom:0.1rem">个人信息</div>
					<div class="flex" style="align-items: center; background: #F8F8F8; padding-left: 0.2rem; margin-top: 0.2rem; border-radius: 0.1rem;">
						<div style="width: 1.6rem; overflow:hidden;">办理人姓名</div>
						<div style="flex-grow: 1; max-width: 4.5rem; padding-left: 0.3rem; color: #2D3038; font-size: 0.26rem;">
							<van-field v-model="all.id_name" placeholder="请输入办理人姓名" />
						</div>
					</div>
					<div class="flex" style="align-items: center; background: #F8F8F8; padding-left: 0.2rem; margin-top: 0.2rem; border-radius: 0.1rem;">
						<div style="width: 1.6rem; overflow:hidden;">联系电话</div>
						<div style="flex-grow: 1; max-width: 4.5rem; padding-left: 0.3rem; color: #2D3038; font-size: 0.26rem;">
							<van-field v-model="all.mobile" placeholder="请输入联系电话" />
						</div>
					</div>
					
					<div v-if="all.id_name && all.mobile.length == 11">
						<div v-if="peizhi.needidcard==1||peizhi.needidcard==undefined">
							<div class="flex" style="align-items: center; background: #F8F8F8; padding-left: 0.2rem; margin-top: 0.2rem; border-radius: 0.1rem;">
								<div style="width: 1.6rem; overflow:hidden;">身份证号</div>
								<div style="flex-grow: 1; max-width: 4.5rem; padding-left: 0.3rem; color: #2D3038; font-size: 0.26rem;">
									<van-field v-model="all.id_num" placeholder="请输入身份证号" />
								</div>
							</div>
						</div>
						
						<div v-if="peizhi.needidcard==1||peizhi.needidcard==undefined">
							<div class="flex" style="align-items: center; background: #F8F8F8; padding-left: 0.2rem; margin-top: 0.2rem; border-radius: 0.1rem;" v-if="!peizhi.shouhuorenxingming">
								<div style="width: 1.6rem; overflow:hidden;">收货人</div>
								<div style="flex-grow: 1; max-width: 4.5rem; padding-left: 0.3rem; color: #2D3038; font-size: 0.26rem;">
									<van-field v-model="all.name" placeholder="请输入收货人" />
								</div>
							</div>
						</div>
						
						
						<div class="flex" style="align-items: center; background: #F8F8F8; padding-left: 0.2rem; margin-top: 0.2rem; border-radius: 0.1rem; position:relative;" v-if="peizhi.duanxin">
							<div style="width: 1.6rem; overflow:hidden;">验证码</div>
							<div style="flex-grow: 1; max-width: 4.5rem; padding-left: 0.3rem; color: #2D3038; font-size: 0.26rem;">
								<div class="code" style="right: 0rem; top:0.2rem; "><van-button type="info" size="small" @click="getcode" type="tel" :disabled="yzmuse" style="font-size: 12px;" >{{yzm}}</van-button></div>
								<van-field v-model="all.code" placeholder="请输入验证码" />
							</div>
						</div>
										
						<div class="flex" style="align-items: center; background: #F8F8F8; padding-left: 0.2rem; margin-top: 0.2rem; border-radius: 0.1rem;">
							<div style="width: 1.6rem; overflow:hidden;">所在地区</div>
							<div style="flex-grow: 1; max-width: 4.5rem; padding-left: 0.3rem; color: #2D3038; font-size: 0.26rem; line-height:44px; position:relative;" @click="showPopup">
								<div class="where">{{shengshiqu}}
									<van-icon name="arrow" size="14" style="position: absolute; top: 0px; line-height:44px; right:0;" />
								</div>
							</div>
						</div>
						<div class="flex" style="align-items: center; background: #F8F8F8; padding-left: 0.2rem; margin-top: 0.2rem; border-radius: 0.1rem;">
							<div style="width: 1.6rem; overflow:hidden;">详细地址</div>
							<div style="flex-grow: 1; max-width: 4.5rem; padding-left: 0.3rem; color: #2D3038; font-size: 0.26rem;">
								<van-field v-model="all.address" placeholder="请输入详细地址" />
							</div>
						</div>
						
						<div v-if="peizhi.shenfenzheng">
							<div style="border-bottom:1px #EAEAEA solid; padding:0.3rem 0">
								根据有关部门要求，必须上传真实身份证照片。<span style="color: #f00;">未上传照片，订单无效。</span>
							</div>
							<div class="flex" style="padding: 0.25rem 0;justify-content: space-around;">
								<div style="width: 3rem; background: #f7f8fa;" class="flexcc">
									
									<div style="width: 100%; height: 100%;">
										<van-uploader :after-read="afterRead1"  deletable="false" preview-size="3rem" show-upload="false" >
											<div v-if="all.face_url"><img :src="all.face_url" style="width: 3rem; "></div>
											<div style="width: 100%; height: 100%;" class="flexcc" v-if="!all.face_url"><van-icon name="photograph" color="#999" size="30" /></div>
										</van-uploader>
									</div>
								</div>
								<div style="width: 3rem;" class="flexcc">
									<img src="./img/face.jpg" style="width: 3rem;">
								</div>
							</div>
							<div style="padding: 0.1rem 0.25rem;">证件四角边缘空隙2厘米以上，手机横拍，照片清晰不模糊，无水印，无反光，无PS</div>
							<div class="flex" style="padding: 0.25rem 0;justify-content: space-around;">
								<div style="width: 3rem; background: #f7f8fa;" class="flexcc">
									
									<div style="width: 100%; height: 100%;">
										<van-uploader :after-read="afterRead2"  deletable="false" preview-size="3rem" show-upload="false" >
											<div v-if="all.back_url"><img :src="all.back_url" style="width: 3rem;"></div>
											<div style="width: 100%; height: 100%;" class="flexcc" v-if="!all.back_url"><van-icon name="photograph" color="#999" size="30" /></div>
										</van-uploader>
									</div>
								</div>
								<div style="width: 3rem;" class="flexcc">
									<img src="./img/back.jpg" style="width: 3rem;">
								</div>
							</div>
							<div style="padding: 0.1rem 0.25rem;">证件四角边缘空隙2厘米以上，手机横拍，照片清晰不模糊，无水印，无反光，无PS</div>
							<div class="flex" style="padding: 0.25rem 0;justify-content: space-around;">
								<div style="width: 3rem; background: #f7f8fa;" class="flexcc">
									<div style="width: 100%; height: 100%;">
										<van-uploader :after-read="afterRead3"  deletable="false" preview-size="3rem" show-upload="false" >
											<div v-if="all.hand_url"><img :src="all.hand_url" style="width: 3rem;"></div>
											<div style="width: 100%; height: 100%;" class="flexcc" v-if="!all.hand_url"><van-icon name="photograph" color="#999" size="30" /></div>
										</van-uploader>
									</div>
								</div>
								<div style="width: 3rem;" class="flexcc">
									<img src="./img/head.png" style="width: 3rem;">
								</div>
							</div>
							<div style="padding: 0.1rem 0.25rem;">无需手持身份证，胸部以上，露出双肩，人像面部比例不低于1/3，无水印，无反光，无PS</div>
						</div>
					</div>
					<div style="font-size: 12px; margin: 0.2rem 0rem; display: flex; flex-wrap: wrap; align-items: center;" v-if="item.network_access_protocol == 1">
						<van-checkbox v-model="checked" style="margin-right: 0.1rem; font-size: 12px;">我已阅读并同意</van-checkbox>
						
						<span style="color: #007AFF;font-size: 12px;" v-for="(item,index) in xieyilist" :key="item.id" @click="dakaixieyi(index)">《{{item.title}}》</span>
						<!-- <span style="color: #007AFF;font-size: 12px;" @click="log1 = true">《客户入网许可协议及服务协议》</span>
						<span style="color: #007AFF;font-size: 12px;" @click="log2 = true">《转卖或转借电话卡风险告知书》</span>
						<span style="color: #007AFF;font-size: 12px;" @click="log3 = true">《个人信息收集证明》</span> -->
					</div>
					
				</div>
			</div>
			
			<div style="background: #fff; border-radius:5px; padding:0.4rem; margin-top:0.2rem; " v-if="peizhi.pinglun == 1 && peizhi.pinglunid && pinglunlist != ''">
				<div style="font-weight: bold; font-size: 15px; margin-bottom:0.3rem;">商品评价</div>
				
				<div style="height: 5rem; width: 100%; overflow: hidden; ">
					
					<div class="mj" :style="sty" ref="haha">
						<div v-for="(item,index) in pinglunlist" :key="index">
							<div v-for="item2 in item" :key="item.id">
								<div style="display: flex; justify-content: space-between; align-items: center; margin-top: 10px;">
									<div style="display: flex;  align-items: center;">
										<img :src="item2.header" style="width: 0.5rem; height: 0.5rem; margin-right: 0.2rem; border: 1px #999 solid; border-radius: 1rem;">
										<div style="color: #666;">{{item2.title}}</div>
									</div>
									<div style="color: #999;">{{item2.created_at}}</div>
								</div>
								<div style="padding: 0.1rem 0 0 0.7rem; color: #999;">{{item2.content}}</div>
							</div>
						</div>
						
					</div>
					
				</div>
				
				<!-- <van-swipe style="height: 140px;" :vertical='true' :autoplay='2000' :show-indicators='false'>
				    <van-swipe-item  v-for="(item,index) in pinglunlist" :key="index">
						<div v-for="item2 in item" :key="item.id">
							<div style="display: flex; justify-content: space-between; align-items: center; margin-top: 10px;">
								<div style="display: flex;  align-items: center;">
									<img :src="item2.header" style="width: 0.5rem; height: 0.5rem; margin-right: 0.2rem; border: 1px #999 solid; border-radius: 1rem;">
									<div style="color: #666;">{{item2.title}}</div>
								</div>
								<div style="color: #999;">{{item2.created_at}}</div>
							</div>
							<div style="padding: 0.1rem 0 0 0.7rem; color: #999;">{{item2.content}}</div>
						</div>
					</van-swipe-item>
				</van-swipe> -->
			</div>
			
			
			<div class="top">
				<div class="fuwenben" style="word-wrap: break-word;" v-html="item.description"></div>
			</div>
			
			<div class="fixed" style="bottom: 0; background: #fff; z-index: 99;">
				<div class="flexbc">
					<div class="flexcc" style="padding-left: 0.3rem; font-size: 0.26rem;">福利价：<div
							style="color: #FF3400;">
							<span style="font-size: 0.35rem;">￥{{item.price}}</span>
						</div>
					</div>
					<div style="background: #FF3400;  padding: 0.3rem 0.5rem; color: #fff; font-size: 0.3rem;" v-if="tijiaoing" @click="tijiao">提交订单</div>
					<div style="background: #FF3400;  padding: 0.3rem 0.5rem; color: #fff; font-size: 0.3rem;" v-if="!tijiaoing">提交订单中...</div>
				</div>
			</div>

			<van-popup v-model="show" position="bottom">
				<van-area :area-list="areaList" :columns-placeholder="['请选择', '请选择', '请选择']" @confirm="queren" @cancel="quxiao" />
			</van-popup>
			<van-popup v-model="jiazaizhong" :close-on-click-overlay="false"><van-loading type="spinner" color="#fff" /></van-popup>
			<!-- <van-popup v-model="show2" position="bottom"
				style="padding: 0.4rem 0.3rem; color: #2D3038; border-radius: 0.2rem 0.2rem 0 0;">
				<div class="flexb" style="font-size: 0.32rem; font-weight: bold;">
					<div style="font-size: 0.32rem; font-weight: bold;">确认订单信息</div>
					<div @click="show2 = false"><img src="img/g.png" style="width: 0.32rem;"></div>
				</div>
				<div class="flexb" style="margin-top: 0.3rem;">
					<div style="color: #8A919F;  font-size: 0.25rem;">商品名称</div>
					<div style="font-size: 0.25rem;">{{person.sale_name}}</div>
				</div>
				<div class="flexb" style="margin-top: 0.3rem;">
					<div style="color: #8A919F; font-size: 0.25rem;">收货人</div>
					<div style="font-size: 0.25rem;">{{name}}</div>
				</div>
				<div class="flexb" style="margin-top: 0.3rem;">
					<div style="color: #8A919F; font-size: 0.25rem;">收货电话</div>
					<div style="font-size: 0.25rem;">{{mobile}}</div>
				</div>
				<div class="flexb" style="margin-top: 0.3rem;">
					<div style="color: #8A919F; font-size: 0.25rem;">收货地址</div>
					<div style="width: 5rem; text-align: right; font-size: 0.25rem;">{{shengshiqu}}{{address}}</div>
				</div>
				<div class="flexcc bor" style="background: #3FCF77; color: #fff; padding: 0.2rem 0; margin-top: 0.4rem;"
					@click="guozhengtong" v-if="tijiaoing">
					<div><img src="img/w.png" style="width: 0.4rem; margin-right: 0.2rem;"></div>
					<div>微信支付</div>
				</div>
				<div class="flexcc bor" style="background: #3FCF77; color: #fff; padding: 0.2rem 0; margin-top: 0.4rem;"
					v-if="!tijiaoing">
					<div><img src="img/w.png" style="width: 0.4rem; margin-right: 0.2rem;"></div>
					<div>订单提交中...</div>
				</div>
			</van-popup> -->
			<van-popup v-model="log1" style="width: 90%; height: 60vh;  padding: 0.3rem;">
				<div class="fz" v-html="log1html">
					
				</div>
				<!-- <div class="fz">
					<div>《客户入网许可协议及服务协议》</div>
					<div>尊敬的用户：</div>
					<div>《中国联通客户服务协议》甲方所需的业务、办理手续以及资费标准请参见乙方的相关业务说明。根据《中华
						人民共和国合同法》、《中华人民共和国联通条例》及其他有关法律、法规的规定，甲乙双方在平等、自愿、公 平、诚实、信用的基础上，
						就电话网络服务的有关事宜，达成协议如下：一、服务内容和资费标准：</div>
					<div>1、乙方在其电话网络覆盖范围内，为甲方有偿提供通信服务；其中，乙方在签订有自动漫游协议的国家和地区的联通运营商网络覆盖范围内为甲方提供国际漫游服务。</div>
					<div>2、甲方可自主选择乙方提供的各项通信业务。</div>
					<div>
						3、乙方根据乙方计费系统数据向甲方收取相关费用，包括月基本费、通话费、短信（含彩信）费以及甲方申请的其他业务的费用。计费周期为自然月，即每月第一日至当月最后一日，由于网络设备产生话单及相关处理会有时延，
						可能发生每月部分话费计入下月话费中收取的情况，届时乙方将在话费详单中明确显示。乙方资费方案、计费规则、收取方式等如有调整，将提前公告。</div>
					<div>4、如甲方通过乙方的通信网络定制、收发与乙方有合作关系的信息服务提供商所提供的各类信息，甲方同意乙方根据信息服务提供商的授权，向甲方代为收取信息费。</div>
					<div>5、如遇政府主管部门对资费等相关内容的政策发生变化，乙方将根据相关要求，对原资费方案行相应调整。调整后方案的具体执行时间以乙方公示为准的内容。</div>
					<div>二、乙方的权利与义务：</div>
					<div>1、乙方为甲方提供的通信服务应当达到国家的相关标准。</div>
					<div>2、乙方通过营业厅、网站及短信等方式向甲方公布并提示服务项目、服务时限、服务范围及资费标准等内容。</div>
					<div>3、乙方应采取下列一种或数种方式向甲方提供方便的业务办理、业务咨询和话费信息查询渠道，包括营业厅、服务热线、服务网站、短信及其他方式等。</div>
					<div>4、乙方有义务采取公布监督电话等形式受理甲方投诉，并在接到投诉之日起15日内答复甲方。</div>
					<div>5、乙方对电话原始话费数据及信息服务计费原始数据保留期限为5个月（系统产生用户话单当月起后5个月，不含当月），对用户提出异议的话单，应保存至异议解决为止。</div>
					<div>6、若甲方对乙方收取的话费存有异议，乙方有责任进行调查、解释，并告知甲方核实处理的结果。</div>
					<div>
						7、乙方严格遵守国家法律法规关于用户个人信息保护、网络安全等规定。乙方收集、使用甲方个人信息，应当遵循合法、正当、必要的原则。甲方理解并同意，乙方及其关联公司可以通过业务受理系统登记、纸质返档，通过网络接收、
						读取并记录等方式，以提供电信服务为目的，在业务活动中收集、使用甲方提供的和甲方使用服务过程中形成的个人信息。乙方有权依法对包含甲方在内的整体用户数据进行分析并加以利用。
						未经甲方同意，乙方不向除乙方关联公司外的第三方提供甲方个人信息。甲方可以通过营业厅或乙方指定的其他渠道，对其个人信息进行查询、更正。乙方不得侵害甲方的通信自由和通信秘密，对甲方的客户资料负有保密义务。
						但根据法律法规规定，乙方有义务配合法定机关对客户通信、资料、数据的调查取证等工作。</div>
					<div>8、乙方应免费向甲方提供通话所在地（仅限国内）火警119、匪警110、医疗急救120、交通事故报警122等公益性电话接入服务。</div>
					<div>9、在甲方欠费的情况下，如甲方在约定的期限内补齐费用并申请开机的，乙方在收到甲方费用时起24个小时内为甲方恢复通信服务。</div>
					<div>10、乙方对甲方暂停通信服务时（以下简称停机），对使用“先使 用，后付费”缴费方式的甲方应提前通知；对使用“先预存话费，后使用”缴费方式的甲方，乙方应采用短信、电话 等方式进行余额提示。
					</div>
					<div>11、乙方检修线路、设备搬迁、工程割接、网络及软件升级等
						可预见的原因可能影响甲方使用的，应提前72小时通知甲方，乙方应采用下列一种或数种方式，即短信、电话、广播、电视、信函、公告、报纸、互联网等方式进行业务公告或通知。</div>
					<div>12、甲方向乙方申告电话通信障碍（指交换设备或传输线路原 因造成通信中断等现象，不包括网络覆盖和终端设备故 障），乙方应按《电信条例》的规定处理。</div>
					<div>13、乙方应在承诺时限内为甲方开通其申请的服务（双方约定
						超出此时限的除外），乙方未及时开通的，应免除甲方自申请之日至服务开通期间的该项服务的月功能费。此外造成甲方直接损失的，乙方依法承担违约责任。</div>
					<div>14、乙方承诺自身不利用通信网络向甲方发送违法信息或骚扰信息（不包括乙方为甲方提供业务服务而发送的信息）。</div>
					<div>
						15、乙方可能重新启用并销售部分其他客户曾使用过的电话号码。原使用该号码的客户（以下简称为“原机主”）如将该号码留作第三方业务的联系电话或者绑定第三方业务，且原机主未在注销前予以变更或解除绑定，
						该号码可能会收到第三方发给原机主的通知，或者因第三方的限制无法在解除绑定前完成新客户认证绑定。新客户需自行至第三方办理解除绑定等，乙方在合理限度内提供配合。</div>
					<div>三、甲方的权利与义务：</div>
					<div>1、甲方办理入网手续时，需向乙方提供真实有效的身份证件原件，代办入网时，需同时提供代理人有效身份证件原件及授权委托书。以单位证件办理入网登记的，除出示单位有效证件之一外，
						还应当出示经办人和使用人的有效证件及授权委托书。如甲方及其受托人拒绝出示有效证件，拒绝提供其证件上所记载的身份信息，乙方有权不为其办理入网手续。如甲方入网登记资料发生变更，应及时通知乙方。
					</div>
					<div>2、未满16周岁及其他无民事行为能力的用户，应由其法定代理人代为办理。</div>
					<div>3、甲方应当按照约定的时间和方式及时、足额地向乙方交纳电信费用；甲方逾期不交纳电信费用的，乙方有权要求补交电信费用，并可以按照所欠费用每日加收3%的违约金。</div>
					<div>4、若甲方对乙方收取的通信费及代信息服务商收取的信息费存有异议，应在异议话费发生后五个月内向乙方提出（系统产生用户话单当月起后5个月，不含当月），乙方应将有争议的数据保存到争议解决为止。
					</div>
					<div>5、甲方要求终止提供通信服务时，应在结清所有费用后办理退网手续。</div>
					<div>6、甲方承诺不利用通信网络发送违法信息或对其他客户的骚扰信息，甲方向第三方发送广告等信息，需经第三方同意认可。</div>
					<div>四、特殊情况的责任承担：</div>
					<div>1、在下列情况下，乙方有权暂停或限制甲方的通信服务，由此给甲方造成的损失，乙方不承担责任：（1）甲方银行帐户被查封、冻结或余额不足等非乙方原因造成乙方结算时划扣不成功的；
						（2）甲方预付费使用完毕而未及时补交款项（包括预付费账户余额不足以划扣下一笔预付费用）的；（3）甲方使用“先使用，后付费”的费用结算方式时，电话费用超过可透支额度的；（4）甲方发送带有非法内容信息的。
					</div>
					<div>
						2、乙方一经发现甲方突然出现超过自己此前三个月平均通信费用5倍以上通信费用时，应当尽可能迅速告知甲方，乙方可以暂停或限制甲方的通信服务，并采取相应的措施。由此给甲方造成的损失，乙方不承担责任。
					</div>
					<div>3、甲方如出现违法使用、违规外呼、呼叫频次异常、超约定用途使用、转租转售、发送违法违规信息、未经接收客户同意发送商业广告信息给他人造成骚扰、被公安机关通报
						以及用户就上述问题投诉较多等情况的，
						经乙方核实确认后，乙方有权终止业务接入。因此给甲方造成的损失，乙方不承担责任。</div>
					<div>
						4、甲方名下的电话号码逾期未交清费用的，乙方有权拒绝甲方以自己名义提出的其他通信业务申请（包括开办新的电话卡），缴费、话费查询除外。根据国家相关规定，甲方在中国办理有效使用的电话卡达到5张的，乙方不予为其开办新的电话卡。
					</div>
					<div>5、在甲方欠费时，乙方可采取信函、委托第三方等形式追缴欠费，并可按照有关规定向征信机构提供甲方的欠费信息。</div>
					<div>
						6、甲方入网后即获取客户服务密码，甲方应妥善保管。服务密码是业务办理的凭证。凡使用服务密码定制、变更业务的行为均被视为甲方或甲方授权的行为。为方便办理业务，乙方也可根据甲方申请以短信等方式提供随机服务密码，
						该密码可作为办理业务的临时凭证。</div>
					<div>
						7、因甲方保管不善等原因导致其电话被他人非法使用，甲方应尽可能迅速告知乙方，办理停机或补卡手续，乙方应予配合并依法采取相应措施。甲方可向公安部门报案，乙方应在技术上协助公安部门进行调查。除乙方有过错外，乙方不承担相应责任。
					</div>
					<div>8、因甲方（包括代理人）提供的客户资料不详、不实或变更后未通知乙方等原因，使乙方无法将服务（如话费单据
						等）提供给甲方，乙方不承担由此对甲方所造成的不良后果。甲方（包括代理人）未完全履行本协议约定义务，
						所提供客户资料不真实、不准确、不完整、超过有效期或无效的，乙方有权暂时中止履行本协议并催告甲方（包括代
						理人）补充提供相关资料。甲方在接到乙方催告后30天内拒不补充提供到位的，乙方有权终止本协议。</div>
					<div>9、当不可抗力的情形发生时，根据不可抗力的影响，部分或者全部免除责任，但法律另有规定的除外。甲方或乙方迟延履行后发生不可抗力的，不能免除责任。</div>
					<div>10、一方违约给对方造成损失的，应当依法承担赔偿责任。</div>
					<div>五、协议的变更、转让与终止。</div>
					<div>1、甲方办理各类业务所签署的表单、乙方以公告等书面形式公开做出的服务承诺均为本协议的补充协议，与本协议冲突部分以补充协议为准，补充协议中未约定部分以本协议为准。
						但补充协议不得规避和降低乙方的法定义务和服务标准。同时不一致条款应向客户明示（如字体加黑、划线 或变换字体等）。</div>
					<div>2、乙方承诺资费方案有效期为一年（双方有特殊约定的除外）。乙方有权在有效期截止后修改资费方案。如需修改，乙方应在有效期届满前两个月通知甲方。如无需修改，则原资费方案顺延一年，顺延次数不限。
						如甲方不接 受修改，则甲方可到期取消该资费方案。</div>
					<div>3、如甲方要将协议项下的手机号码及附属权利义务转让给第 三人（过户），应与第三人共同到乙方营业网点协商，在三方就权利义务转移等问题达成一致后，共同签订过户协议，本协议同时自动终止。
						因甲方私自转让而造成的欠 费、停机等后果，由甲方自行承担。</div>
					<div>4、因技术进步，乙方为提升服务质量对电话网络进行整体换 代升级而导致通信服务无法继续履行的，乙方应至少提前 90日以短信或者公告的方式告知甲方，并提供合理的解决方案。</div>
					<div>5、下列情况下乙方有权解除协议，收回号码，终止提供服务。由此给甲方造成的损失，乙方不承担责任，并有权向甲方追讨欠费∶ （1）电话被用于违法犯罪活动，或甲方严重违约致使乙方遭受较大损失;
						（2）乙方收到法定机关要求停止为甲方提供通信服务; （3）甲方欠费停机超过60天。</div>
					<div>6、在法定终止条件或约定终止条件具备时，本协议终止。乙方继续保留向甲方追缴所欠费用的权利，有权收回号码，并在服务规范规定的冷号期后重新启用。 </div>
					<div>六、 其他约定</div>
					<div>1、信息服务提供商通过乙方的网络平台提供的增值电信应用服务，甲方可自愿订购或退订。</div>
					<div>2、甲方使用信息服务提供商提供的增值电信应用服务的资费标准由信息服务提供商公布。若甲方对收取的服务费用有异议，乙方与信息服务提供商应遵循"首问负责"的原则，共同协商处理。</div>
					<div>3、乙方关联公司是指乙方现在或将来控制、受控制或与其处于共同控制下的任何公司、机构以及上述公司或机构的合法继承人。其中"控制"是指直接或间接地拥有影响所提及公司管理的能力，无论是通过所有权、
						有投票权的股份、合同或其他被人民法院认定的方式。</div>
					<div>4、双方的联系方式位于签章处，一方如有变更，应及时通知另一方，未及时通知的，一方按照原有地址发送文件的（包括但不限于欠费催缴通知）发出后即视为送达。</div>
					<div>5、本协议项下发生的争议，双方可协商解决，协商不成的，双方可选择向电信管理部门申诉，或向消费者协会投诉。</div>
					<div>本协议自甲方确认阅读后自动生效。</div>
				</div> -->
			</van-popup>
			<van-popup v-model="log2" style="width: 90%; height: 60vh;  padding: 0.3rem;">
				<div style="font-size: 12px;">
					《转卖或转借电话卡风险告知书》</br>
					尊敬的用户：</br>
					尊敬的用户：根据《中华人民共和国反恐怖主义法》、《中华人民共和国网络安全法》、《全国人民代表大会常务委员会关于加强网络信息保护的决定》、《电信和互联网用户个人信息保护规定》（工业和信息化部令第24号）、
					《电话用户真实身份信息登记规定》（工业和信息化部令第25 号）等法律法规及规定的相关要求，用户在中国移动、中国电信、中国联通各类营业网点（含自有营 业厅、网上营业厅、授权零售代销渠道）办理固定电话、
					移动电话（含无线上网卡）入网、过户等业务，以及其他需要如实登记用户真实身份信息的业务时，必须出示有效证件原件，并按规定进行用户信息核验或登记，登记的信息包括姓名、证件类型、号码及地址等，
					同时，为更好地提供服务，需要用户提供如联系人、联系电话、通信地址、电子邮箱等信息用户可以通过我公司自有营业厅或指定的其他渠道查询和/或更正本人信息，如用户拒绝依法提供个人有效证件以及真实身份等信息
					，或冒用他人的证件，或者使用伪造、变造证件，我公司有权不提供服务或终止服务。</br>
					为向用户提供优质、个性化的服务，包括但不限于提供通信服务、保障通信服务安全、改善服务质量、推介个性化产品，我公司将遵循合法、正当、必要的原则，通过业务受理系统登记、纸质返档，以及网络接收、读取并记录等方式，
					按照法律法规规定以及协议约定收集、使用用户个人信息，包括用户提供的信息、用户使用服务过程中产生的信息我公司严格按照法律法规的相关要求，建立信息安全保障制度，采取技术措施和其他必要措施保护用户的个人信息安全。</br>
					我公司非因下列事由，不会对外披露用户个人信息∶ 1、事先获得用户明确同意；2、根据有关法律法规规定要求；3、根据有关司法机关和/或政府主管部门的强制性要求；
					4、为维护国家安全、公共安全的利益所必需且适当；
					5、为维护我公司或用户的合法权益所必需且适当。</br>
				</div>
			</van-popup>
			<van-popup v-model="log3" style="width: 90%; height: 60vh;  padding: 0.3rem;">
				<div style="font-size: 12px;">
					《个人信息收集证明》</br>
					尊敬的用户：</br>
					根据《中华人民共和国反恐怖主义法》、《全国人 民代表大会常务委员会关于加强网络信息保护的决 定》、《电信和互联网用户个人信息保护规定》
					（工业和信息化部令第24号）和《电话用户真实 身份信息登记规定》（工业和信息化部令第25 号）等国家法律法规的要求，客户在中国电信公司 各类营业网点（含自有营业厅、手机营业厅、网上
					营业厅、授权合作代理商等）办理固定电话、
					移动电话（含无线上网卡）入网、过户以及需要出示客户证件的有关业务时，客户应配合出示有效证件原件并进行查验、登记，登记信息包括姓名、证件类型、号码及地址等。同时，为更好地提供服务，需要客户提供如联系人、
					联系电话、通信地址、电子邮箱等信息。客户本人持有效证件可通过自有营业厅查询和/或更正本人信息，或登录手机营业厅查询本人信息。
					如客户拒绝依法提供个人有效证件及真实信息，我公司有权不提供服务或终止服务。为向客户提供优质、
					个性化的服务，包括但不限于提供通信服务、保障通信服务安全、改善服务质量、推介个性化产品等，我公司将遵循合法、正当、必要的原则，按照法律法规规定和/或协议约定使用留存客户个人信息，并妥善保管，严格保密，依法保护客户个人信息，
					非因下列事由，不对外泄露客户个人信息∶（a）事先获得客户的明确授权;（b）根据有关的法律法规要求; （c）按照相关司法机关和/或政府主管部门的要求;
					（d）为维护社会公众的利益所必需且适当;（e）为维护我公司或客户的合法权益所必需且适当。
				</div>
			</van-popup>
			<van-popup v-model="logqueding" style="width: 90%; height: 60vh;  padding: 0.3rem; background: #fff !important; color: #333 !important; height: auto !important; border-radius: 0.1rem;">
				<div style="margin-bottom: 0.3rem;">请先阅读，并点击同意以下协议</div>
				<div style="margin-bottom: 0.3rem;">	
					<span style="color: #007AFF;font-size: 12px;" v-for="(item,index) in xieyilist" :key="item.id" @click="dakaixieyi(index)">《{{item.title}}》</span>
				</div>
				<div class="flexcc">
					<div><van-button type="default" size="small" @click="logqueding = false">不同意</van-button></div>
					<div  style="margin-left: 0.3rem;"><van-button type="info" size="small" @click="yongyi" >同意</van-button></div>
				</div>
			</van-popup>
			
			<div v-html="payGateWay" ref="alipayWap"></div>
		</div>




		<script>
			var h = document.documentElement.clientWidth / 7.5 + 'px';
			document.documentElement.style.fontSize = h;
			
			// import MonitorKeyboard from './js/jianpan.js'
			
			new Vue({
				el: '#app',
				data: function() {
					return {
						tijiaoing:true,
						monitorKeyboard:null,
						inputVal:'',
							  
						shuruzhong:false,
						areaList: "",
						shengshiqu: "点击选择所在地区",
						show: false,
						yzm: "获取验证码",
						yzmnum: 60,
						yzmuse: false,
						checked:false,
						apis:"",
						peizhi:"",
						item:"",
						all:{
							id:"",
							id_name:"",
							id_num:"",
							name:"",
							mobile:"",
							code:"",
							
							address:"",
							province:"",
							city:"",
							district:"",
							
							face_url:"",
							back_url:"",
							hand_url:"",
							
							pay_method:2,//	1	是	string	1微信2支付宝
							openid:"",
							
							clickid:localStorage.getItem('clickid'),
							creativeid:localStorage.getItem('creativeid'),
							creativetype:localStorage.getItem('creativetype'),
							adid:localStorage.getItem('adid'),
						},
						jiazaizhong:true,
						
						pinglunlist:"",
						log1:false,
						log1html:"",
						log2:false,
						log3:false,
						xieyilist:"",
						logqueding:false,
						sty:{},
						payGateWay:""
					}
				},
				async created() {
					
					// https://static.91haoka.cn/areanew.json
					// https://static.91haoka.cn/tongyidiqu.json
					await axios.get("https://static.91haoka.cn/areanew.json")
						.then(response=> {
							this.areaList = response.data
						})
					var that = this
					this.id = this.getUrlParam('id')	
					this.all.id = this.getUrlParam('id')	
	
					if (location.href.includes('localhost')) {
						this.apis = '/apis'
					}
					this.getpeizhi()
					
					let p = this.getitem()
					p.then(item=>{
						if(this.item.price == 0){
							
						}else{
							var wx = window.navigator.userAgent.toLowerCase();
							if (wx.match(/MicroMessenger/i) == 'micromessenger') {
								this.all.pay_method = 3 
								
								if (this.getUrlParam('code')) {
									this.code = this.getUrlParam('code')
									axios.get(`${this.apis}/api/wechat/code2token?code=${this.code}`)
									    .then(response => {
									        if(response.data.msg.code == 0){
												if(response.data.data.errcode){
													axios.get(`${this.apis}/api/wechat/code?url=${window.location}`)
													    .then(response => {
													        if(response.data.msg.code == 0){
													            window.location.href = response.data.data
													        }else{
													            vant.Toast(response.data.msg.info);
													        }
													    })
												}
									            this.all.openid = response.data.data.openid
									        }else{
												vant.Toast(response.data.msg.info);
									        }
									    })
								} else {
									axios.get(`${this.apis}/api/wechat/code?url=${window.location}`)
									    .then(response => {
									        if(response.data.msg.code == 0){
									            window.location.href = response.data.data
									        }else{
									            vant.Toast(response.data.msg.info);
									        }
									    })
								}
							}
						}
					})
					
					
					
					
					
					

					// axios.post(that.links + '/api/wechat/code', {"token":that.code,"appid":"wx2d18b51e3875af9a","scope":"userinfo"})
					//     .then(response => {
					//         if(response.data.msg.code == 0){
					//             console.log("登陆成功")
					//             that.loading = false
					//         }else{
					//             that.$message.error(response.data.msg.info);
					//         }
					//     })

				},
				mounted() {
					window.addEventListener('scroll', this.scrollToTop)
					
				},
				methods: {
					dakaixieyi:function(index){
						this.log1html = this.xieyilist[index].content
						this.log1 = true
					},
					getNewArray:function(array, subGroupLength){
						  let index = 0;
						  let newArray = [];
						  while(index < array.length) {
							  console.log(index)
						      newArray.push(array.slice(index, index += subGroupLength));
						  }
						  return newArray;
					},
					getpinglun:function(id){
						
						axios.get(`${this.apis}/api/mini/comment/list?temp_id=${id}`)
						.then(response => {
							this.pinglunlist = response.data.data
							
							let time = moment().subtract(this.pinglunlist.length * parseInt(Math.random()*10),'minutes')
							if(this.pinglunlist != ''){
								this.pinglunlist.forEach((item,index)=>{
									if(item.header == ''){
										item.header = 'https://static.91haoka.cn/toux.png'
									}
									let miao = parseInt(Math.random()*60)
									if(miao < 10){
										miao = '0' + miao.toString()
									}
									time = moment(time).add(index+1 * parseInt(Math.random()*10),'minutes').format('YYYY-MM-DD HH:mm:' + miao) 
									item.created_at = moment(time).add(index+1 * parseInt(Math.random()*10),'minutes').format('HH:mm:' + miao) 
								})
								this.pinglunlist = this.getNewArray(this.pinglunlist, 2);
							}
							
							this.$nextTick(item=>{
								
								let gao = (-(this.$refs.haha.clientHeight/2)) + 'px'
								let style = document.styleSheets[2]
								console.log(gao,style)
								style.insertRule(`
									@keyframes allkey{
										from {
											transform:  translate(0px,0px);
										}
										to {
											transform:  translate(0,${gao});
										}
									}
								`)
								if(this.$refs.haha.clientHeight/2 > 500){
									this.sty = {
										'animation': 'allkey 20s linear infinite'
									}
								}
							})
						
						})
					},
				// 	getKeyboardState(){
				// 	  this.monitorKeyboard = new MonitorKeyboard();
				// 	  this.monitorKeyboard.onStart();
				
				// 	  // 监听虚拟键盘弹出事件
				// 	  this.monitorKeyboard.onShow(() => {  
				// 		const userAgent = typeof window === 'object' ? window.navigator.userAgent : '';
				// 		if (/android/i.test(userAgent)) {
				// 		  this.shuruzhong = true
				// 		} else if (/iPhone|iPod|iPad/i.test(userAgent)) {
						  
				// 		}
				// 	  })
				
				// 	  //监听键盘收起的事件
				// 	  this.monitorKeyboard.onHidden(() => {
				// 		const userAgent = typeof window === 'object' ? window.navigator.userAgent : '';
				// 		if (/android/i.test(userAgent)) {
				// 		  this.shuruzhong = false
				// 		} else if (/iPhone|iPod|iPad/i.test(userAgent)) {
						  
				// 		}
				// 	  })
				// 	},

					
					// kaishishuru:function(){
					// 	this.$nextTick(()=>{
					// 		this.shuruzhong = true
					// 	})
					// },
					// tingzhishuru:function(){
					// 	this.$nextTick(()=>{
					// 		this.shuruzhong = false
					// 	})
					// },
					getpeizhi:function(){
						
							let wenjianjia = 'web-page'
							if(window.location.href.includes('storep.91haoka.cn') && this.apis == ''){
							  wenjianjia = 'web-page'
							}
							if(window.location.href.includes('store.91haoka.cn') && this.apis == ''){
							  wenjianjia = 'test-web-page'
							}
						
							axios.get(`https://file.91haoka.cn/${wenjianjia}/${this.id}.json?v=${Math.random()}`)
							// axios.get(`${this.apis}/storage/web-page/${this.id}.json?v=${Math.random()}`)
							.then(response => {
								this.peizhi = JSON.parse(response.data)
								if(this.peizhi.pinglun == 1 && this.peizhi.pinglunid){
									this.getpinglun(this.peizhi.pinglunid)
								}
								
								
								if(!this.peizhi.xiantianxie){
									this.peizhi.xiantianxie = 1
								}
								console.log(this.peizhi)
								if(this.peizhi.bufahuodiqu == 1){
									let data = this.areaList.province_list
									let data2 = this.areaList.city_list
									let data3 = this.areaList.county_list							
									
									if(this.peizhi.delivery_city != ''){
										let obj = {}
										let obj2 = {}
										let obj3 = {}
										this.peizhi.delivery_city.forEach(items => {
											
											if(items[0]){
												Object.keys(data).map((key1, item1) => {
													if (items[0] == key1) {
														obj[key1] = data[key1]
													}
												})
											}
											if(items[1]){
												Object.keys(data2).map((key2, item2) => {
													if (items[1] == key2) {
														obj2[key2] = data2[key2]
													}
												})
											}			
											if(items[2]){
												Object.keys(data3).map((key3, item3) => {
													if (items[2] == key3) {
														obj3[key3] = data3[key3]
													}
												})
											}	
																	
										})
										
										this.areaList.province_list = obj
										this.areaList.city_list = obj2
										this.areaList.county_list = obj3
									}
									
								}
								if (this.peizhi.bufahuodiqu == 3) {
									let data = JSON.parse(JSON.stringify(this.areaList.province_list)) 
									let data2 = JSON.parse(JSON.stringify(this.areaList.city_list))
									let data3 = JSON.parse(JSON.stringify(this.areaList.county_list))
									
									
									
									// this.peizhi.bufahuosheng.forEach(items => {
									// 	Object.keys(data).map((key1, item1) => {
									// 		if (items == key1) {
									// 			delete this.areaList.province_list[items]
									// 		}
									// 	})			
									// })
									// this.peizhi.no_city.forEach(items => {											
									// 	Object.keys(data2).map((key2, item2) => {
									// 		if (items[1] == key2) {
									// 			delete this.areaList.city_list[key2]
									// 		}
									// 	})					
									// })
									this.peizhi.no_city.forEach(items => {
										Object.keys(data3).map((key3, item3) => {
											if (items[2] == key3) {
												delete this.areaList.county_list[key3]
											}
										})			
										
									})
									
									
								}
								
							})
							
						
						
					},
					getitem:function(){
						return new Promise((res,rej)=>{
							axios.get(`${this.apis}/api/page/info?id=${this.id}`)
								.then(response => {
									if(response.data.data != '' && response.data.data){
										this.item = response.data.data
										if(this.item.network_access_protocol == 1){
											
											
											if(this.item.protocol_check){
												this.checked = true
											}
											//获取协议
											axios.get(`${this.apis}/api/network-process-protocol/info?id=${this.item.protocol_id}`)
											.then(response => {
												this.xieyilist = response.data.data
											})
										}
										document.title = response.data.data.sale_name
										this.item.json = JSON.parse(this.item.json)
										this.jiazaizhong = false
										res('ok')
									}else{
										document.title = '商品已下架'
										vant.Toast(response.data.msg.info);
									}
									
									// this.is_need_photo = this.person.is_need_photo
								})
						})
					},
					
					dataURLtoFile(dataurl, filename) {
					  let arr = dataurl.split(","),
					    mime = arr[0].match(/:(.*?);/)[1],
					    bstr = atob(arr[1]),
					    n = bstr.length,
					    u8arr = new Uint8Array(n);
					  while (n--) {
					    u8arr[n] = bstr.charCodeAt(n);
					  }
					  return new File([u8arr], filename, {
					    type: mime
					  });
					},
					uploadok: function(file,who) {
					  var that = this;
					  var reader = new FileReader()
					  var img = new Image();
					  reader.onload = function(e) {
					    img.src = e.target.result;
					  };
					  var canvas = document.createElement('canvas');
					  var context = canvas.getContext('2d');
					  // base64地址图片加载完毕后
					  let p = new Promise((r, j) => {
					    img.onload = function() {
					      // 图片原始尺寸
					      var originWidth = this.width;
					      var originHeight = this.height;
					      // 最大尺寸限制
					      var maxWidth = 1920,
					        maxHeight = 1080;
					      // 目标尺寸
					      var targetWidth = originWidth,
					        targetHeight = originHeight;
					      // 图片尺寸超过400x400的限制
					      if (originWidth > maxWidth || originHeight > maxHeight) {		              if (originWidth / originHeight > maxWidth / maxHeight) {
					           // 更宽，按照宽度限定尺寸                  targetWidth = maxWidth;                  targetHeight = Math.round(maxWidth * (originHeight / originWidth));
					          } else {                  targetHeight = maxHeight;
					           targetWidth = Math.round(maxHeight * (originWidth / originHeight));		              }
					      }
					      // canvas对图片进行缩放
					      canvas.width = targetWidth;
					      canvas.height = targetHeight;
					      // 清除画布
					      context.clearRect(0, 0, targetWidth, targetHeight);
					      // 图片压缩
					      context.drawImage(img, 0, 0, targetWidth, targetHeight);
					
					      let base64 = canvas.toDataURL("image/jpeg", 0.8); // 压缩后的base64图片
					      let file2 = that.dataURLtoFile(base64, Date.parse(Date()) + ".jpg");
						  r(file2)
					    };
					  })
					  reader.readAsDataURL(file);
					  p.then(files => {
						  
						  axios.post(`${this.apis}/api/qiniu/token`,{bucket:"gth"})
						  	.then(response => {
						  	var qiniudata = new FormData();
						  		qiniudata.append('file', files);
						  		qiniudata.append('token',response.data.data);
						  		
						  		axios.post('https://upload.qiniup.com',qiniudata)
						  			.then(response => {
						  				this.all[who] = 'https://pic.91haoka.cn/' + response.data.key
						  			})
						  })
						  
					    // var formData = new FormData();
					    // formData.append("file", files);
					    // formData.append("type", 'pic');
					    // axios.post(`${this.apis}/api/system/upload`, formData)
					    //   .then(response => {
					    //     if (response.data.msg.code == 0) {
					    //       that.img = response.data.data
					    //       that.$emit('getimg', response.data.data)
					    //     } else {
					    //       that.$message.error(response.data.msg.info);
					    //     }
					    //   })
					  })
					},
					
					afterRead1: function(file) {
						this.uploadok(file.file,'face_url')
						// axios.post(`${this.apis}/api/qiniu/token`,{bucket:"gth"})
						// 	.then(response => {
						// 	var qiniudata = new FormData();
						// 		qiniudata.append('file', file.file);
						// 		qiniudata.append('token',response.data.data);
								
						// 		axios.post('https://upload.qiniup.com',qiniudata)
						// 			.then(response => {
						// 				this.all.face_url = 'https://pic.91haoka.cn/' + response.data.key
						// 			})
						// })
					},
					afterRead2: function(file) {
						this.uploadok(file.file,'back_url')
						// axios.post(`${this.apis}/api/qiniu/token`,{bucket:"gth"})
						// 	.then(response => {
						// 	var qiniudata = new FormData();
						// 		qiniudata.append('file', file.file);
						// 		qiniudata.append('token',response.data.data);
						// 	axios.post('https://upload.qiniup.com',qiniudata)
						// 		.then(response => {
						// 			this.all.back_url = 'https://pic.91haoka.cn/' + response.data.key
						// 		})
						// })
					},
					afterRead3: function(file) {
						this.uploadok(file.file,'hand_url')
						// axios.post(`${this.apis}/api/qiniu/token`,{bucket:"gth"})
						// 	.then(response => {
						// 	var qiniudata = new FormData();
						// 		qiniudata.append('file', file.file);
						// 		qiniudata.append('token',response.data.data);
						// 	axios.post('https://upload.qiniup.com',qiniudata)
						// 		.then(response => {
						// 			this.all.hand_url = 'https://pic.91haoka.cn/' + response.data.key
						// 		})
						// })
					},
					//获取url的code用
					getUrlParam: function(name) {
						var query = window.location.search.substring(1);
						var vars = query.split("&");
						for (var i = 0; i < vars.length; i++) {
							var pair = vars[i].split("=");
							if (pair[0] == name) {
								return pair[1];
							}
						}
						return (false);
					},
			// 		scrollToTop() {
			// 			var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body
			// 				.scrollTop;
			
			// 			if (scrollTop > 1000) {
			// 				this.scrollTopshow = true
			// 			} else {
			// 				this.scrollTopshow = false
			// 			}
			// 		},
			// 		backtop: function() {
			// 			window.scrollTo(0, 376);
			// 		},
					
					//支付
					// fukuan: function() {
					// 	this.dialog = false
					// 	this.num = 3
					// 	this.dianba = true
					// 	var that = this
					// 	axios.post(this.urls + '/api/recharge/hua-pay', {
					// 			mobile: this.input,
					// 			product_id: this.li,
					// 			payment_method: "wx_mp"
					// 		})
					// 		.then(response => {
					// 			if (response.data.msg.code == 0) {
					// 				WeixinJSBridge.invoke(
					// 					'getBrandWCPayRequest', {
					// 						"appId": "wx2d18b51e3875af9a",
					// 						'timeStamp': response.data.data.payInfo.timeStamp,
					// 						'nonceStr': response.data.data.payInfo.nonceStr,
					// 						'package': response.data.data.payInfo.package,
					// 						'signType': 'MD5',
					// 						'paySign': response.data.data.payInfo.paySign,
					// 					},
					// 					function(res) {
					// 						if (res.err_msg == "get_brand_wcpay_request:ok") {}
					// 					});
					// 			} else {
					// 				that.$message.error(response.data.msg.info);
					// 			}
					// 		})
					// },
					//验证是否可以提交
					// go: function() {
					// 	if (this.mobile.length != 11) {
					// 		vant.Toast('请填写正确手机号');
					// 		return false
					// 	}
					// 	if (this.address == "" || this.name == "" || this.sheng == "") {
					// 		vant.Toast('请填写完整信息');
					// 		return false

					// 	} else {
					// 		this.show2 = true
					// 	}
					// },
					//姓名写入 出身份证
					// namewrite: function() {
					// 	this.cardshow = true
					// },
					
					//弹出省市区
					showPopup: function() {
						this.show = true
					},
					//省市区确认
					queren: function(v) {
						if (!v[0].code || !v[1].code || !v[2].code) {
							vant.Toast('请完整选择省市区');
							return false
						}
						this.all.province = v[0].name
						this.all.provincecode = v[0].code
						this.all.city = v[1].name
						this.all.citycode = v[1].code
						this.all.district = v[2].name
						this.all.districtcode = v[2].code
						
						this.shengshiqu = this.all.province + '  ' + this.all.city + '  ' + this.all.district
						
						this.show = false
					},
					//省市区取消
					quxiao: function() {
						this.show = false
					},
					//获取验证码
					getcode: function() {
						var that = this;
						if (this.all.mobile.length != 11) {
							vant.Toast("请输入正确手机号");
							return;
						}
						that.yzmnum = 60;
						that.timer = setInterval(function() {
							if (that.yzmnum == 0) {
								clearInterval(that.timer);
								that.yzm = '获取验证码';
								that.yzmuse = false
							} else {
								that.yzmuse = true
								that.yzm = that.yzmnum + '秒重新获取';
								that.yzmnum = that.yzmnum - 1;
							}
						}, 1000);
						
						axios.post(`${this.apis}/api/system/code/send`, {mobile:this.all.mobile,id:this.id})
							.then(function(response) {
								if (response.data.msg.code == 0) {
									vant.Toast("验证码已发送");
								}
							})
					},

					//验证码校验
					checkCode: function() {
						var that = this
						return new Promise((res,rej)=>{
							axios.post(`${this.apis}/api/system/code/check`,{
								mobile:this.all.mobile,
								code:this.all.code
							}).then(response => {
									if (response.data.msg.code == 0) {
										if(response.data.data){
											res('ok')
										}else{
											vant.Toast('请输入正确的验证码');
										}
										
									} else {
										vant.Toast(response.data.msg.info);
										
									}			
								})
						})
					},
					// qufukuan: function() {
					// 	this.show2 = true
					// },
					//国政通
					guozhengtong: function() {
						if (this.all.id_num.length != 18) {
							vant.Toast("请填写正确身份证号码！");
							return false
						}
						
						return new Promise((res,rej)=>{
							axios.post(`${this.apis}/api/id/check`,{
								name:this.all.id_name,
								id_num:this.all.id_num,
								id:this.id
							}).then(response => {
									if (response.data.msg.code == 0) {
										if(response.data.data == 'success'){
											res('ok')
										}else{
											vant.Toast('请填写正确的姓名和身份证号码');
										}
									} else {
										vant.Toast(response.data.msg.info);
										
									}			
								})
						})
					},
					tijiaogo:function(){
						var that = this
						this.tijiaoing = false
						//1微信外 2支付宝  3微信内
						axios.post(`${this.apis}/api/store/purchase`, this.all)
							.then(response=> {
								if (response.data.msg.code == 0) {
									this.payGateWay = response.data.data
									
									  
									  this.$nextTick(()=> {
										  this.$refs.alipayWap.children[0].submit()
									  })
									// vant.Toast('下单成功');
									// if(this.item.price == 0){
									// 	//快手回调
									// 	if(this.peizhi.kuaishou){
									// 		_ks_trace.push({event: 'form', convertId: that.peizhi.kuaishou, cb: function(){
									// 			console.log('Your callback function here!')
									// 		}})
									// 		setTimeout(()=>{
									// 			window.location.href = './success.html?tab='+this.item.tab
									// 		},500)
									// 	}else{
									// 		setTimeout(()=>{
									// 			window.location.href = './success.html?tab='+this.item.tab
									// 		},500)
									// 	}	
									// }else{
									// 	var wx = window.navigator.userAgent.toLowerCase();
									// 	if (wx.match(/MicroMessenger/i) == 'micromessenger') {
									// 		WeixinJSBridge.invoke(
									// 		 'getBrandWCPayRequest', {
									// 		      "appId":response.data.data.appId,    
									// 		      'timeStamp': response.data.data.timeStamp,
									// 		      'nonceStr': response.data.data.nonceStr,
									// 		      'package': response.data.data.package,
									// 		      'signType': 'MD5',
									// 		      'paySign': response.data.data.paySign,
									// 		 },
									// 		 function(res){
									// 		       if(res.err_msg == "get_brand_wcpay_request:ok" ){
									// 				   //快手回调
									// 				   if(that.peizhi.kuaishou){
									// 						_ks_trace.push({event: 'form', convertId: that.peizhi.kuaishou, cb: function(){
									// 							console.log('Your callback function here!')
									// 						}})
									// 						setTimeout(()=>{
									// 							window.location.href = './success.html?tab='+this.item.tab
									// 						},500)
									// 				   }else{
									// 					   setTimeout(()=>{
									// 					   	window.location.href = './success.html?tab='+this.item.tab
									// 					   },500)
									// 				   }
													   
													   
									// 			   }else{
													   
									// 			   }
									// 		 }); 
									// 	}else{
									// 		//快手回调
									// 		if(that.peizhi.kuaishou){
									// 			_ks_trace.push({event: 'form', convertId: that.peizhi.kuaishou, cb: function(){
									// 				console.log('Your callback function here!')
									// 			}})
									// 			setTimeout(()=>{
									// 				window.location.href = response.data.data.h5_url
													
									// 			},500)
									// 		}else{
									// 			setTimeout(()=>{
									// 				window.location.href = response.data.data.h5_url
													
									// 			},500)
									// 		}
											
									// 	}
										
									// }
								} else {
									vant.Toast(response.data.msg.info);
									if(response.data.msg.code == 234 || response.data.msg.code == 235  || response.data.msg.code == 236){
										
									}else{
										this.tijiaoing = true
									}
								}
		
							})
					},
					yongyi:function(){
						this.checked = true
						this.logqueding = false
					},
					tijiao: function() {
						
						if(this.item.network_access_protocol == 1){
							if(!this.checked){
								// vant.Toast("请先阅读并同意客服协议！");
								this.logqueding = true
								return false
							}
						}
						if(this.peizhi.needidcard==1||this.peizhi.needidcard==undefined){
							if(this.all.id_name == ''){
								vant.Toast("请填写姓名！");
								return false
							}
							if (this.all.id_num.length != 18) {
								vant.Toast("请填写正确身份证号码！");
								return false
							}
						}
						
						
						if (this.all.mobile.length != 11) {
							vant.Toast("请输入正确手机号");
							return;
						}
						if (!this.all.address || !this.all.province) {
							vant.Toast("请填写地址");
							return;
						}
						
						if(this.peizhi.shenfenzheng){
							if (!this.all.back_url || !this.all.hand_url || !this.all.face_url) {
								vant.Toast("请先上传照片");
								return;
							}
						}
						let guolist = []
						if(this.peizhi.guozhengtong){
							guolist.push(this.guozhengtong())
						}
						if(this.peizhi.duanxin){
							guolist.push(this.checkCode())
						}
						if(this.peizhi.shouhuorenxingming){
							this.all.name = this.all.id_name
						}
						// if(this.all.name == ''){
						// 	vant.Toast("请填写收货人姓名！");
						// 	return false
						// }
						if(this.peizhi.xiantianxie==2&&this.peizhi.needidcard==2){
							this.all.name = this.all.id_name
						}
						if(guolist != ''){
							Promise.all(guolist).then(()=>{
								this.tijiaogo()
							})
						}else{
							this.tijiaogo()
						}
					}
				}
			});
		</script>
	</body>

</html>
